<template>
	<view class="">
		<view v-if="!isLogin" class="login flex-col col-center row-center">
			<u-loading size="40" color="#00632B" mode="circle" :show="showLoading"></u-loading>
			<image :src="imgUrl + '/static/images/goods_null.png'" v-show="!isLogin"></image>
			<router-link to="/pages/login/login">
				<view class="muted mt20" style="font-size: 36rpx;" v-show="!isLogin">请先登录商城</view>
			</router-link>
		</view>
		<view v-else class="goods-cate">
			<view class="top_tabs">
				<u-tabs-swiper ref="uTabs" :list="cateList" activeColor="#00632B" :current="swiperCurrent"
					@change="tabsChange()" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<loading-view v-if="isFirstLoading"></loading-view>
			<swiper style="flex: 1;" :current="swiperCurrent" @transition="transition">
				<swiper-item style="height: 100%;" class="swiper-item" v-for="(item, index) in cateList" :key="index">
					<scroll-view style="height: 100%;width: 100%;" scroll-y @scrolltolower="onreachBottom">
						<view class="content">
							<view class="goods_list_view">
								<view class="sort-nav-wrap">
									<sort-nav v-model="sortConfig" :show-type="false"></sort-nav>
								</view>
								<view class="goods-list">
									<view v-for="(item,i) in goodsList" :key="i">
										<view class="list-item"
											@click="goPage({path:'/pages/goods_details/goods_details?id=' + item.id})">
											<image class="thumb"
												style="width: 320rpx; height: 427rpx; margin-top: 30rpx;"
												mode="aspectFill" :src="item.image"></image>
											<u-icon-stop @click.stop="collectGoodsFun(item)" class="heart_icon_badge"
												color="#00632B" size="40"
												:name="item.is_collect == 1 ? 'heart-fill' : 'heart'"></u-icon-stop>
											<view class="product-title">{{item.name}}</view>
											<view class="con">
												<view class="price">￥{{item.min_price}}</view>
											</view>
										</view>
									</view>
									<loading-footer :status="status" :slot-empty="true">
										<view slot="empty" class="flex-col col-center" style="padding: 200rpx 0 0">
											<image class="img-null" :src="imgUrl + '/static/images/goods_null.png'">
											</image>
											<text class="lighter sm">暂无商品</text>
										</view>
									</loading-footer>
								</view>
							</view>


						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsList,
		getListByLevelOne,
	} from '@/api/store';
	import {
		getRect,
		trottle,
		arraySlice
	} from '@/utils/tools';
	import {
		loadingType
	} from '@/utils/type.js'
	import {
		collectGoods,
	} from '@/api/user'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import Cache from '@/utils/cache'
	import {
		TABBAROPTION,
		ALLCATELIST
	} from '@/config/cachekey';
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				isFirstLoading: true,
				// current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				maskHeight2: 0,
				goodsList: [],
				cateList: [],
				imgUrl: `${this.$imgUrl}/wechat`,
				name: '',
				cateTwoId: 0,
				currentCate3Id: 0,
				firstcatid: 0,
				brand_id: 0,
				shop_cate_id: 0,
				cateTwoName: '',
				currIndex: 0,
				tabBarOptions: {},
				pagetitle: '',
				menuButtonInfo: {},
				sortConfig: {
					goodsType: 'double',
					priceSort: '',
					saleSort: 'desc',
				},
				allCateList: [],
			};
		},
		async onLoad(options) {
			this.tabBarOptions = Cache.get(TABBAROPTION);
			//重置
			Cache.set(TABBAROPTION, {});
			this.firstcatid = this.$Route.query.firstcatid;
			this.brand_id = this.$Route.query.brand_id;
			this.shop_cate_id = this.$Route.query.shop_cate_id;
			this.cateTwoId = this.$Route.query.currentCate2Id;
			this.pagetitle = this.$Route.query.pagetitle;
			// console.log('========this.swiperCurrent======================');
			// console.log(this.swiperCurrent);
			this.currentCate3Id = this.$Route.query.currentCate3Id;
			this.allCateList = Cache.get(ALLCATELIST);

			let selected_cats_index = this.$Route.query.selected_cats_index || '';
			let firstIndex = selected_cats_index.split('_')[0]
			let secondIndex = selected_cats_index.split('_')[1]
			this.swiperCurrent = selected_cats_index.split('_')[2];
			let thisSecondInfo = this.allCateList[firstIndex].children[secondIndex];
			this.cateList = thisSecondInfo.children;
			uni.setNavigationBarTitle({
				title: thisSecondInfo.name
			});
			this.getGoodsListFun();
			// this.getListByLevelOneFun();
			// #ifdef MP-WEIXIN
			this.getMenuButtonInfo()
			// #endif
		},
		onShow() {
			if (!this.isLogin) {
				// setTimeout(() => {
				// 	this.$Router.push('/pages/login/login')
				// }, 2000)
				return
			}
			this.getCartNum()
		},
		watch: {
			// cateList: {
			// 	immediate: false,
			// 	handler(val) {
			// 		this.hasData = val.length ? true : false
			// 		if(this.isFirstLoading == true){
			// 			this.onRefresh();
			// 		}
			// 	}
			// },
			'sortConfig.saleSort'() {
				this.onRefresh()
			},
			'sortConfig.priceSort'() {
				this.onRefresh()
			}
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url: url.path
				});
			},
			async collectGoodsFun(item) {
				if (!this.isLogin) return this.$Router.push('/pages/login/login')
				const {
					msg,
					code
				} = await collectGoods({
					goods_id: item.id
				});
				if (code == 1) {
					this.$toast({
						title: msg
					});
					item.is_collect = !item.is_collect;
				}
				// 	// this.getGoodsDetailFun();
			},
			onreachBottom() {
				this.status = loadingType.LOADING
				this.getGoodsListFun()
			},
			onRefresh() {
				this.status = loadingType.LOADING
				this.page = 1
				this.goodsList = []
				this.getGoodsListFun()
			},
			getGoodsListFun() {
				let {
					page,
					// cateList,
					status,
					goodsList,
					shop_cate_id,
					brand_id,
					sortConfig: {
						priceSort,
						saleSort,
					}
				} = this;
				// console.log('===getGoodsListFun====');
				// console.log(this.cateList);
				// if(!cateList.length) return
				
				console.log('=========getGoodsListFun========');
				console.log(this.currentCate3Id);
				console.log(this.firstcatid);
				// let id = this.currentCate3Id || this.firstcatid;

				if (status == loadingType.FINISHED || this.appConfig.cate_style == 4) return;
				getGoodsList({
					page_no: page,
					platform_cate_id: this.currentCate3Id || this.firstcatid,
					brand_id: brand_id,
					shop_cate_id: shop_cate_id,
					sort_by_price: priceSort,
					sort_by_sales: saleSort,
				}).then(res => {
					this.isFirstLoading = false;
					if (res.code == 1) {
						let {
							more,
							lists,
						} = res.data;
						goodsList.push(...lists);
						this.page++;
						if (!more) {
							this.status = loadingType.FINISHED;
						}
						if (goodsList.length <= 0) {
							this.status = loadingType.EMPTY
							return;
						}
					} else {
						this.status = loadingType.ERROR
					}
				});
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				// this.currentCate3Id = this.cateList[index].id;
				console.log('=========tabsChange(index) ======================');
				console.log(this.cateList[index]);
				
				this.brand_id = this.brand_id ? this.cateList[index].id : 0;
				this.shop_cate_id = this.shop_cate_id ? this.cateList[index].id : 0;
				this.currentCate3Id = this.currentCate3Id >0 ? this.cateList[index].id : 0;
				this.onRefresh();
				// this.cateTwoList = this.allCateList[index] && this.allCateList[index].children ?  this.allCateList[index].children : [];
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				// console.log(e);
				// let dx = e.detail.dx;
				// this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			// animationfinish(e) {
			// 	let current = e.detail.current;
			// 	this.$refs.uTabs.setFinishCurrent(current);
			// 	this.swiperCurrent = current;
			// 	// this.current = current;
			// 	this.brand_id = this.brand_id ? this.cateList[index].id : 0;
			// 	this.shop_cate_id = this.shop_cate_id ? this.cateList[index].id : 0;
			// 	this.currentCate3Id = this.currentCate3Id >0 ? this.cateList[index].id : 0;
			// 	this.onRefresh();
			// },
			getMenuButtonInfo() {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.menuButtonInfo.pos_top_height = this.menuButtonInfo.top;
			},
			showPopCatFilter(isShow) {
				console.log('===高度增加=showPopCatFilter======' + isShow);
				this.maskHeight2 = isShow;
			},
			hidePopCatFilter() {
				console.log('====hidePopCatFilter=====');
				this.maskHeight2 = 0;
			},
			...mapActions(['getCartNum']),
			async getListByLevelOneFun() {
				const {
					code,
					data
				} = await getListByLevelOne({
					id: this.cateTwoId
				});
				if (code == 1) {
					// this.cateList = data
					// console.log('=========this.cateList==============================');
					// console.log(this.cateList);
				}
			},

		},
		computed: {
			...mapGetters(['inviteCode', 'appConfig', 'distribution', 'showLoading']),
			// cateList(){
			// 	let selected_cats_index = this.$Route.query.selected_cats_index || '';
			// 	let firstIndex = selected_cats_index.split('_')[0]
			// 	let secondIndex = selected_cats_index.split('_')[1]

			// 	console.log('==========this.allCateList[firstIndex].children=======================');
			// 	console.log(this.allCateList[firstIndex].children);

			// 	return this.allCateList[firstIndex].children[secondIndex] || [];
			// 	// if(this.allCateList && this.firstcatid){

			// 	// }else{
			// 	// 	return '';
			// 	// }
			// 	// return this.cateList[this.selectIndex] && this.cateList[this.selectIndex].children ? this.cateList[this.selectIndex].children : [];
			// },
		}
	};
</script>
<style lang="scss" scoped>
	$header-height: 94rpx;

	page {
		background-color: #fff;
		height: 100%;

		.goods-cate {
			display: flex;
			flex-direction: column;
			height: calc(100vh - var(--window-top));
			width: 100%;

			.swiper-box {
				flex: 1;
			}

			.content {
				.goods_list_view {
					.sort-nav-wrap {
						margin-left: 400rpx;
						margin-right: 30rpx;
					}

					.goods-list {
						width: 750rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: center;
						margin: 0rpx 15rpx;

						.list-item {
							width: 320rpx;
							overflow: hidden;
							background: #fff;
							padding-bottom: 20rpx;
							margin-bottom: 20rpx;
							margin: 0rpx 20rpx;

							.thumb {
								z-index: -10;
								width: 100%;
								height: 180px;
								//margin: 0 auto;
								display: block;
							}

							.heart_icon_badge {
								z-index: 99;
								position: relative;
								bottom: 390rpx;
								left: 260rpx;
							}

							.product-title {
								position: relative;
								top: -20rpx;
								font-size: 30rpx;
								padding-left: 20rpx;
								overflow: hidden;
								-webkit-line-clamp: 2;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
							}

							.con {
								display: flex;
								justify-content: center;
								padding-left: 20rpx;
								display: flex;
								align-items: center;
								// justify-content: space-between;
								// padding-right: 20rpx;

								.price {
									color: $-color-black;
								}

								// .buy-num {
								// 	font-size: 26rpx;
								// }

							}
						}

					}
				}
			}
		}

		.overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
			/* 确保在 u-mask 之上 */
			background-color: transparent;
			/* 透明遮罩 */
		}





	}
</style>